<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>
    table tr th, table tr td {
        border: #000000 1px solid;
        text-align: center;
        vertical-align: middle;
        font-size: 16px;
        line-height: 30px
    }

    table tr td input {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        text-align: center;
    }

    table tr td textarea {
        border: none;
        width: 100%;
        height: 30px;
        outline: none;
        resize: none;
        overflow-y: hidden;
    }

    .changeCursorIco {
        cursor: pointer;
    }

    .select2{
        margin: 0;
    }

    /**select2 去边框 */
    .selection .select2-selection--single{
        border: none;
    }
    /**select2 下拉菜单中内容居中 */
    .select2-results__option{
        text-align: center;
    }
</style>
<body class="hold-transition skin-yellow sidebar-mini">

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box" style="border: none;box-shadow: none">
                <div class="box-body">
                    <div class="col-md-12">
                        <button id="btn_save" class="btn btn-success pull-right" style="margin: 10px;width: 82px;"
                                shiro:hasPermission="pro:equipment:edit"
                                th:data-prodOrdNo="${prodOrd.prodNo}" onclick="save(this)" type="button">保存
                        </button>
                    </div>
                    <div class="col-md-10 col-md-offset-1">
                        <form id="dataForm">
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="border: none"></td>
                                    <td colspan="7"
                                        style="font-size: 20px;height: 35px">
                                        <B>设备类项目排产</B>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td style="width: 100px;">项目编号</td>
                                    <td style="width:250px;" th:text="${prodOrd.prodNo}"></td>
                                    <td style="width:250px;">项目名称</td>
                                    <td colspan="2" th:text="${prodOrd.prodName}"></td>
                                    <td style="width:200px;">数量</td>
                                    <td style="width:200px;" th:text="${prodOrd.prodNum}"></td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td>安装地点</td>
                                    <td th:text="${prodOrd.insSite}"></td>
                                    <td>需方</td>
                                    <td colspan="2" th:text="${prodOrd.customer}"></td>
                                    <td style="width:200px;">交货时间</td>
                                    <td style="width:200px;"
                                        th:text="${#dates.format(prodOrd.prodDelDat, 'yyyy-MM-dd')}"></td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td colspan="7"
                                        style="font-size: 20px;height: 35px">
                                        <B>项目排产</B>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border: none"></td>
                                    <td>序号</td>
                                    <td>任务名称</td>
                                    <td>计划开始时间</td>
                                    <td style="width:250px;">计划完成时间</td>
                                    <td style="width:250px;">所属部门</td>
                                    <td style="width:250px;">派工工时</td>
                                    <td style="width:400px;">备注</td>
                                </tr>
                                <tr th:if="${prodPlaDetList == null }" th:id="${item.badaCod}"
                                    th:each="item:${tableItem}">
                                    <td th:if="${item.badaCod=='p02' or item.badaCod=='p05' or item.badaCod=='p09' or item.badaCod=='p14'}"
                                        style="border: none;color: red;font-weight: bold;font-size: 23px;">*
                                    </td>
                                    <td th:if="${item.badaCod!='p02' and item.badaCod != 'p05' and item.badaCod!='p09' and item.badaCod!='p14'}"
                                        style="border: none"></td>
                                    <td th:text="${itemStat.count}"></td>
                                    <td>
                                        <input name="prpdNam" type="text" readonly="readonly" autocomplete="off"
                                               th:value="${item.badaNam}"/>
                                        <input name="prpdCod" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.badaCod}"/>
                                        <input name="prpdOrdNo" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.badaOrdNo}"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaStaDat" type="text" class="changeCursorIco datepicker"
                                               style="outline:none;"
                                               readonly="readonly" alt="点击选择开始时间" onchange="verificationStart(this)"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaEndDat" type="text" class="changeCursorIco datepicker"
                                               style="outline:none;"
                                               readonly="readonly" alt="点击选择结束时间" onchange="verificationEnd(this)"/>
                                    </td>
                                    <td>
                                        <select name="prpdDepId" class="select2 select2-hidden-accessible" style="position:absolute;width:100%;height:100%;">
                                            <option style="text-align: center;" value="">--请选择所属部门--</option>
                                            <option style="text-align: center;"
                                                    th:value="${deptItem.id}" th:text="${deptItem.name}"
                                                    th:each="deptItem:${deptList}"></option>
                                        </select>
                                    </td>
                                    <td>
                                        <input name="prpdAssWorHours" type="text" style="outline:none;text-align: left;"/>
                                    </td>
                                    <td>
                                        <textarea name="prpdRem" maxlength="255"></textarea>
                                    </td>
                                </tr>
                                <tr th:if="${prodPlaDetList.size() > 0 }" th:id="${item.prpdCod}"
                                    th:each="item:${prodPlaDetList}">
                                    <td th:if="${item.prpdCod=='p02' or item.prpdCod=='p05' or item.prpdCod=='p09' or item.prpdCod=='p14'}"
                                        style="border: none;color: red;font-weight: bold;font-size: 23px;">*
                                    </td>
                                    <td th:if="${item.prpdCod!='p02' and item.prpdCod != 'p05' and item.prpdCod!='p09' and item.prpdCod!='p14'}"
                                        style="border: none"></td>
                                    <td th:text="${itemStat.count}"></td>
                                    <td>
                                        <input name="prpdNam" type="text" readonly="readonly" autocomplete="off"
                                               th:value="${item.prpdNam}"/>
                                        <input name="prpdCod" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdCod}"/>
                                        <input name="prpdOrdNo" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdOrdNo}"/>
                                        <input name="prpdId" type="hidden" style="display: none" readonly="readonly"
                                               th:value="${item.prpdId}"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaStaDat" class="changeCursorIco datepicker" type="text"
                                               readonly="readonly" alt="点击选择开始时间" style="outline:none;"
                                               th:value="${#dates.format(item.prpdPlaStaDat, 'yyyy-MM-dd')}"
                                               onchange="verificationStart(this)"/>
                                    </td>
                                    <td>
                                        <input name="prpdPlaEndDat" class="changeCursorIco datepicker" type="text"
                                               readonly="readonly" alt="点击选择结束时间" style="outline:none;"
                                               th:value="${#dates.format(item.prpdPlaEndDat, 'yyyy-MM-dd')}"
                                               onchange="verificationEnd(this)"/>
                                    </td>
                                    <td>
                                        <select name="prpdDepId" class="select2 select2-hidden-accessible" style="position:absolute;width:100%;height:100%;">
                                            <option selected value="">&nbsp;</option>
                                            <option th:selected="${item.prpdDepId eq deptItem.id}"
                                                    th:value="${deptItem.id}" th:text="${deptItem.name}"
                                                    th:each="deptItem:${deptList}"></option>
                                        </select>
                                    </td>
                                    <td>
                                        <input name="prpdAssWorHours" type="text" style="outline:none;text-align: left;"
                                               th:value="${#strings.defaultString(item.prpdAssWorHours,'')}"/>
                                    </td>
                                    <td>
                                        <textarea name="prpdRem" th:text="${#strings.defaultString(item.prpdRem,'')}"
                                                  maxlength="255"></textarea>
                                    </td>
                                </tr>
                            </table>

                        </form>
                    </div>
                    <div class="col-md-10 col-md-offset-1"
                         style="font-size: 16px;font-family:'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;line-height: 30px;">
                        <div class="form-inline">
                            <div class="form-group pull-left">
                                <label class="control-label">
                                    创建人：
                                </label>
                                <label id="fou" th:text="${fou}" class="control-label"></label>
                            </div>
                            <div class="form-group pull-right">
                                <label class="control-label">
                                    创建时间：
                                </label>
                                <label id="creDat" th:text="${creDat}" class="control-label"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    /**
     * Jquery 就绪函数
     */
    $(function () {
        loadDesignInfo();
    });

    /**
     * 验证当结束时间是否大于开始时间
     */
    function verificationStart(obj) {
        let startVal = $(obj).val();
        let endVal = $(obj).parent().parent().find("[name='planEndTime']").val();
        if (startVal != undefined && endVal != undefined) {
            let start = new Date(startVal);
            let end = new Date(endVal);
            if (end <= start) {
                $(obj).val('');
                js.modal.warning("尊敬的用户，您所输入的开始时间必须大于结束时间！");
            }
        }
    }

    /**
     * 验证当结束时间是否大于开始时间
     */
    function verificationEnd(obj) {
        let endVal = $(obj).val();
        let startVal = $(obj).parent().parent().find("[name='planStartTime']").val();
        if (startVal != undefined && endVal != undefined) {
            let end = new Date($(obj).val());
            let start = new Date($(obj).parent().parent().find("[name='planStartTime']").val());
            if (end <= start) {
                $(obj).val('');
                js.modal.warning("尊敬的用户，您所输入的结束时间必须大于开始时间！");
            }
        }
    }

    /**
     * 保存
     * @param obj
     */
    function save(obj) {
        let dataArray = new Array();
        let dataModel = new Object();
        $.each($("#dataForm").serializeArray(), function (_, kv) {
            if (kv.name === 'prpdNam') {
                dataModel.prpdNam = kv.value;
            }
            if (kv.name === 'prpdCod') {
                dataModel.prpdCod = kv.value;
            }
            if (kv.name === 'prpdOrdNo') {
                dataModel.prpdOrdNo = kv.value;
            }
            if (kv.name === 'prpdPlaStaDat') {
                if (kv.value != "") {
                    dataModel.prpdPlaStaDat = kv.value;
                } else {
                    dataModel.prpdPlaStaDat = null;
                }
            }
            if (kv.name === 'prpdPlaEndDat') {
                if (kv.value != "") {
                    dataModel.prpdPlaEndDat = kv.value;
                } else {
                    dataModel.prpdPlaEndDat = null;
                }
            }
            if (kv.name === 'prpdDepId') {
                if (kv.value != "") {
                    dataModel.prpdDepId = kv.value;
                } else {
                    dataModel.prpdDepId = null;
                }
            }
            if (kv.name === 'prpdAssWorHours') {
                if (kv.value != "") {
                    dataModel.prpdAssWorHours = kv.value;
                } else {
                    dataModel.prpdAssWorHours = null;
                }
            }
            if (kv.name === 'prpdRem') {
                if (kv.value != "") {
                    dataModel.prpdRem = kv.value;
                } else {
                    dataModel.prpdRem = null;
                }
                if (dataModel.prpdNam != undefined) {
                    dataArray.push(dataModel);
                    dataModel = new Object();
                }
            }
        });
        js.post({
            url: ctx + 'task/scheduling/saveSchedulingPlan',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {
                prodNo: $(obj).attr('data-prodOrdNo'),
                prodPlanListJson: JSON.stringify(dataArray)
            },
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    js.modal.success(result.msg);
                    window.opener.reloadTable();
                    window.open('', '_self');
                    window.close();
                } else {
                    js.modal.warning(result.msg);
                }
            },
            error: function () {
                js.modal.fail();
            }
        });

        // js.modal.confirm('尊敬的用户，您确定要保存设备类项目排产计划吗？', function () {
        //     js.post({
        //         url: ctx + 'task/scheduling/saveSchedulingPlan',
        //         type: 'post',
        //         traditional: true,            // 阻止深度序列化， 使参数可以使用数组
        //         dataType: 'json',
        //         contentType: "application/x-www-form-urlencoded",
        //         data: {
        //             prodNo:$(obj).attr('data-prodOrdNo'),
        //             prodPlanListJson:JSON.stringify(dataArray)
        //         },
        //         async: true,                // 异步执行
        //         success: function (result) {
        //             if (result.type === web_status.SUCCESS) {
        //                 js.modal.success(result.msg);
        //                 window.opener.reloadTable();
        //                 window.open('','_self');
        //                 window.close();
        //             } else {
        //                 js.modal.warning(result.msg);
        //             }
        //         },
        //         error: function () {
        //             js.modal.fail();
        //         }
        //     });
        // });
    }

    /**
     * 获取设计信息
     */
    function loadDesignInfo() {
        js.post({
            url: ctx + 'task/scheduling/loadDesignInfo',
            type: 'post',
            traditional: true,            // 阻止深度序列化， 使参数可以使用数组
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            data: {
                prodNo: $("#btn_save").attr('data-prodOrdNo')
            },
            async: true,                // 异步执行
            success: function (result) {
                if (result.type === web_status.SUCCESS) {
                    $("#p00 [name='planEndTime']").val(result.data.completeDate);
                }
            },
            error: function () {
                js.modal.fail();
            }
        });
    }
</script>
</body>
</html>